<template>
  <div class="addressadd">
    <van-nav-bar
  title="地址信息"
  left-arrow
  @click-left="$router.go(-1)"
/>
    <van-address-edit
    v-if="edit"
  :area-list="areaList"
  show-search-result
  tel-maxlength="11"
  show-set-default
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  :area-info="AddressInfo"
/>
<van-address-edit
v-else
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>
  </div>
</template>

<script>
import { getRegionTree, setAddressAdd } from '@/api/address'
import { areaList } from '@vant/area-data'

export default {
  name: 'addressAdd',
  data () {
    return {
      areaList,
      searchResult: [{
        name: '黄龙万科中心',
        address: '杭州市西湖区'
      }],
      provinceList: {},
      cityList: {},
      region: {},
      list: {},

      // 表单回显
      AddressInfo: {}
    }
  },
  async created () {
    // 测试 默认显示
    this.AddressInfo = {
      // id: item.id,
      //     name: item.name,
      //     tel: item.tel,
      //     address: item.address,
      //     isDefault: item.isDefault
    }
    // 判断从哪来的 edit 为 true 则新增 反之编辑
    const { data: list } = await getRegionTree()
    this.list = list.list
    // console.log(this.list)
  },
  methods: {
    onSave (content) {
      this.$toast('save')
      // console.log(content.id)
      // console.log(content.name)
      // console.log(content.tel)
      // console.log(content.province)
      // console.log(content.city)
      // console.log(content.county)
      // console.log(content.addressDetail)
      // console.log(content.isDefault)
      if (content.province === '北京市') {
        content.province = '北京'
      }
      if (content.province === '天津市') {
        content.province = '天津'
      }
      this.getaddress(content.province, content.city, content.county)
      const data = {
        form: {
          name: content.name,
          phone: content.tel,
          region: [
            {
              value: this.provinceList.value,
              label: content.province
            },
            {
              value: this.cityList.value,
              label: content.city
            },
            {
              value: this.region.value,
              label: content.county
            }
          ],
          detail: content.addressDetail
        }
      }
      // console.log(data)
      setAddressAdd(data)
      this.$router.replace('/addresslist')
    },
    onDelete () {
      this.$toast('delete')
    },
    // 获取编辑状态
    edit () {
      return this.$route.query.edit
    },

    // 转换成后端可以识别的数据
    getaddress (province, city, county) {
      Object.keys(this.list).forEach(key => {
        if (this.list[key].name === province) {
          const provinceList = {
            value: this.list[key].id,
            label: this.list[key].name,
            city: this.list[key].city
          }
          this.provinceList = provinceList
          // console.log(provinceList)
        }
      })
      // console.log(this.list)
      // console.log(this.provinceList)
      Object.keys(this.provinceList.city).forEach(key => {
        if (this.provinceList.city[key].name === city) {
          const cityList = {
            value: this.provinceList.city[key].id,
            label: this.provinceList.city[key].name,
            region: this.provinceList.city[key].region
          }
          this.cityList = cityList
        }
      })
      // console.log(this.cityList)
      Object.keys(this.cityList.region).forEach(key => {
        if (this.cityList.region[key].name === county) {
          const region = {
            value: this.cityList.region[key].id,
            label: this.cityList.region[key].name
          }
          this.region = region
        }
      })

      // console.log(this.region)
    }
  }
}
</script>
<style>

</style>
